import { _decorator, Button, ccenum, Component, tween, Tween, TweenEasing, UITransform, Vec3, view, Widget } from 'cc';
const { ccclass, property } = _decorator;

enum Easing {
  linear = 0,
  smooth,
  fade,
  constant,
  quadIn,
  quadOut,
  quadInOut,
  quadOutIn,
  cubicIn,
  cubicOut,
  cubicInOut,
  cubicOutIn,
  quartIn,
  quartOut,
  quartInOut,
  quartOutIn,
  quintIn,
  quintOut,
  quintInOut,
  quintOutIn,
  sineIn,
  sineOut,
  sineInOut,
  sineOutIn,
  expoIn,
  expoOut,
  expoInOut,
  expoOutIn,
  circIn,
  circOut,
  circInOut,
  circOutIn,
  elasticIn,
  elasticOut,
  elasticInOut,
  elasticOutIn,
  backIn,
  backOut,
  backInOut,
  backOutIn,
  bounceIn,
  bounceOut,
  bounceInOut,
  bounceOutIn,
}

const EasingStr = [
  'linear',
  'smooth',
  'fade',
  'constant',
  'quadIn',
  'quadOut',
  'quadInOut',
  'quadOutIn',
  'cubicIn',
  'cubicOut',
  'cubicInOut',
  'cubicOutIn',
  'quartIn',
  'quartOut',
  'quartInOut',
  'quartOutIn',
  'quintIn',
  'quintOut',
  'quintInOut',
  'quintOutIn',
  'sineIn',
  'sineOut',
  'sineInOut',
  'sineOutIn',
  'expoIn',
  'expoOut',
  'expoInOut',
  'expoOutIn',
  'circIn',
  'circOut',
  'circInOut',
  'circOutIn',
  'elasticIn',
  'elasticOut',
  'elasticInOut',
  'elasticOutIn',
  'backIn',
  'backOut',
  'backInOut',
  'backOutIn',
  'bounceIn',
  'bounceOut',
  'bounceInOut',
  'bounceOutIn',
];

@ccclass('UIAnimation')
export class UIAnimation extends Component {
  @property(Vec3)
  beginPos: Vec3 = new Vec3();
  @property(Vec3)
  endPos: Vec3 = new Vec3();
  // 使用 @property 装饰器将属性暴露到编辑器
  @_decorator.type(Easing)
  @property({
    type: ccenum(Easing), // 指定枚举类型
    displayName: 'tweenType', // 属性显示名称
    tooltip: '缓动函数', // 鼠标悬停提示
  })
  tweenType: Easing = Easing.linear; // 默认值为 Apple
  // @property(EasingType)
  // easingType;

  boo: boolean = true;

  protected onLoad(): void {
    const trans = this.node.getComponent(UITransform);
    trans.width = view.getVisibleSize().width;
    this.showAni();
  }

  protected onEnable(): void {
    this.showAni();
  }
  showAni() {
    Tween.stopAllByTarget(this.node);
    this.node.setPosition(this.beginPos.x, this.beginPos.y);
    const widget = this.node.getComponent(Widget);
    const endPos = new Vec3(0, 0, 0);
    endPos.y = (view.getVisibleSize().height - widget.top) / 2 - (view.getVisibleSize().height - widget.bottom) / 2;
    tween(this.node)
      .to(0.4, { position: endPos }, { easing: EasingStr[this.tweenType] as TweenEasing })
      .call(this.updateWidget.bind(this))
      .start();
  }

  updateWidget() {
    const widget = this.node.getComponent(Widget);
    widget.enabled = true;
    widget.updateAlignment();
  }
}
